<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();//获取项目名称
%>
<html>
<head>
    <title>OEE报表</title>
    <link rel="stylesheet" href="<%=path%>/static/css/font.css">
    <link rel="stylesheet" href="<%=path%>/static/css/xadmin.css">
    <link rel="stylesheet" href="<%=path%>/static/css/formSelects-v4.css" />
    <script src="<%=path%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/static/js/xadmin.js"></script>

</head>
<body>
<div class="layui-fluid" id="divvuehtml">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <blockquote class="layui-elem-quote">OEE报表图统计
                    </blockquote>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据统计</div>
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            车间：
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="chejian" v-model="chejian" lay-verify="required" lay-filter="chejian">
                                <option value=""></option>
                                <option value="A车间">A车间</option>
                                <option value="B车间">B车间</option>
                                <option value="C车间">C车间</option>
                                <option value="D车间">D车间</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            生产线：
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="scx" v-model="scx" lay-verify="required" lay-filter="scx">
                                <option value=""></option>
                                <option value="A产线">A产线</option>
                                <option value="B产线">B产线</option>
                                <option value="C产线">C产线</option>
                                <option value="D产线">D产线</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            班次：
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="bc" v-model="bc" lay-verify="required" lay-filter="bc">
                                <option value=""></option>
                                <option value="A班次">A班次</option>
                                <option value="B班次">B班次</option>
                                <option value="C班次">C班次</option>
                                <option value="D班次">D班次</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            工位：
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="gw" v-model="gw" lay-verify="required" lay-filter="gw" xm-select="select1">
                                <option value="A工位">A工位</option>
                                <option value="B工位">B工位</option>
                                <option value="C工位">C工位</option>
                                <option value="D工位">D工位</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            开始日期：
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text"  lay-verify="required" v-model="strDate" name="strDate" id="strDate" placeholder="请输入开始日期" autocomplete="off"  class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            结束日期：
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text"  lay-verify="required" v-model="endDate" name="endDate" id="endDate" placeholder="请输入结束日期" autocomplete="off"  class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header" style="font-size: 20px;font-weight: bold">设备综合率OEE报表</div>

                    <div class="layui-card-body ">
                        <table class="layui-table" style="text-align: center">
                            <colgroup>
                                <col width="20%">
                                <col width="20%">
                                <col width="20%">
                                <col width="20%">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th style="text-align: center">车间</th>
                                <th style="text-align: center">生产线</th>
                                <th style="text-align: center">班次</th>
                                <th style="text-align: center">开始日期</th>
                                <th style="text-align: center">结束日期</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{{chejian}}</td>
                                <td>{{scx}}</td>
                                <td>{{bc}}</td>
                                <td>{{strDate}}</td>
                                <td>{{endDate}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="layui-card-body" style="min-height: 500px;">
                        <div id="main1" class="layui-col-sm12" style="height: 500px;"></div>
                    </div>

                    <div class="layui-card-body ">
                        <table class="layui-table" style="text-align: center">
                            <colgroup>
                                <col width="16%">
                                <col width="16%">
                                <col width="16%">
                                <col width="16%">
                                <col width="16%">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th style="text-align: center">车间</th>
                                <th style="text-align: center">生产线</th>
                                <th style="text-align: center">工位</th>
                                <th style="text-align: center">良品数</th>
                                <th style="text-align: center">净工作时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr  v-for="item in equipmentNumberList">
                                <td>{{item.chejian}}</td>
                                <td>{{item.scx}}</td>
                                <td>{{item.gw}}</td>
                                <td>{{item.oee}}</td>
                                <td>1500</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>


                </div>

            </div>
        </div>

    </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/vue.js"></script>
<script th:inline="none">
    var ve = new Vue({
        el: '#divvuehtml',//绑定vue渲染范围
        data: {
            chejian:"",
            scx:"",
            gw:"",
            bc:"",
            strDate:"",
            endDate:"",
            equipmentNumberList:[],
            dataList:[],
            gwList:[],
            equipmentModels:[]
        },created: function () {//vue在打开html也没初始化创建函数
            //this.ininChart();
        },mounted: function () {//初始化html完成后在进行操作
            setTimeout(function() {
                layui.config({
                    base: '<%=path%>/static/js/' //此处路径请自行处理, 可以使用绝对路径
                }).extend({
                    formSelects: 'formSelects-v4'
                });
                layui.use(['table','form','layer','laydate','formSelects'],function() {
                    var form = layui.form;
                    var layer = layui.layer;
                    var laydate = layui.laydate;
                    var formSelects = layui.formSelects;
                    form.on('select(chejian)', function(data){
                        ve.chejian=data.value;
                    });
                    form.on('select(scx)', function(data){
                        ve.scx=data.value;
                    });
                    form.on('select(gw)', function(data){
                        ve.gw=data.value;
                    });
                    formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
                        //id:           点击select的id
                        //vals:         当前select已选中的值
                        //val:          当前select点击的值
                        //isAdd:        当前操作选中or取消
                        //isDisabled:   当前选项是否是disabled
                        ve.gw=formSelects.value('select1', 'nameStr');
                        //如果return false, 那么将取消本次操作
                        return true;
                    });
                    form.on('select(bc)', function(data){
                        ve.bc=data.value;
                    });

                    //执行一个laydate实例
                    laydate.render({
                        elem: '#strDate' //指定元素
                       ,done: function(value, date, endDate){
                            ve.strDate=value;
                        }
                    });
                    laydate.render({
                         elem: '#endDate' //指定元素
                        ,done: function(value, date, endDate){
                            ve.endDate=value;
                        }
                    });
                    //监听提交
                    form.on('submit(sreach)', function(data) {
                        var index;
                        $.ajax({
                            url: "<%=path%>/api/equipmentNumber/getTableCount.do",
                            type: "POST",
                            data: data.field,
                            dataType: "json",
                            beforeSend: function (XMLHttpRequest) {
                                index = layer.msg('正在提交数据中，请稍候', {
                                    icon: 16,
                                    time: false,
                                    shade: 0.8
                                });
                            }, success: function (data) {
                                if (data.success) {
                                    ve.equipmentNumberList=data.data.equipmentNumberList;
                                    ve.dataList=data.data.dateList;
                                    ve.gwList=data.data.gwList;
                                    ve.equipmentModels=data.data.equipmentModels;
                                    // 基于准备好的dom，初始化echarts实例
                                    var myChart = echarts.init(document.getElementById('main1'));
                                    // 指定图表的配置项和数据
                                    option = {
                                        tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {
                                                type: 'shadow'
                                            }
                                        },
                                        legend: {
                                            data: ve.gwList
                                        },
                                        toolbox: {
                                            show: true,
                                            orient: 'vertical',
                                            left: 'right',
                                            top: 'center',
                                            feature: {
                                                mark: { show: true },
                                                dataView: { show: true, readOnly: false },
                                                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                                                restore: { show: true },
                                                saveAsImage: { show: true }
                                            }
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                axisTick: { show: false },
                                                data: ve.dataList
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: ve.equipmentModels
                                    };
                                    // 使用刚指定的配置项和数据显示图表。
                                    myChart.setOption(option);
                                } else {
                                    xadmin.alert(data.msg, 2)
                                }
                            }, complete: function (XMLHttpRequest, textStatus) {
                                layer.close(index);
                            }, error: function (data) {
                                layer.alert('网络异常或者数据错误', {
                                    icon: 2
                                });
                            }
                        });
                        return false;
                    })
                });
            },100)
        },methods: {//调用函数
            ininChart:function () {
                setTimeout(function() {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main1'));
                    // 指定图表的配置项和数据
                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ["A工位"]
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: { show: false },
                                data: ['2023-11-29']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'A工位',
                                type: 'bar',
                                barGap: 0,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [0]
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },100)
            }
        },updated: function () {
            layui.use(['form'], function(){
                var form = layui.form;
                form.render();
            })
        }
    })
</script>
</html>
